<template>
    <div>
        <div style="text-align: center;margin: auto">
            <div>
                <img style="margin-bottom: 20px" src="../../../assets/auth-ico.png">

            </div>
            <div>
                <button class="verify-btn" type="primary"
                        v-if="verifyMethod.mobileValid"
                        @click="openSendMobileCode">使用 手机短信验证码 【已绑定】
                </button>
            </div>

            <br/>

            <div>
                <button class="verify-btn" type="primary"
                        @click="openSendEmailCode"
                        v-if="verifyMethod.emailValid">使用 邮箱验证码 【已绑定】
                </button>
            </div>


            <send-mobile-code-model :send-mobile-code-form-visible="mobileSendModelVisible"
                                    @closeMobileForm="closeMobileForm"
                                    :mobile="verifyMethod.mobile"/>

            <send-email-code-model :send-email-code-form-visible="emailSendModelVisible"
                                   @closeEmailForm="closeEmailForm"
                                   :email="verifyMethod.email"

            />

        </div>
    </div>
</template>

<script>
    import verifyApi from "../../../api/user/account/verifyApi";
    import SendMobileCodeModel from "../../../components/user/account/sendMobileCodeModel";
    import SendEmailCodeModel from "../../../components/user/account/sendEmailCodeModel";

    export default {
        name: "verifyPage",
        components: {SendEmailCodeModel, SendMobileCodeModel},
        data() {
            return {
                verifyMethod: {
                    email: "",
                    mobile: "",
                    emailValid: false,
                    mobileValid: false
                },
                mobileSendModelVisible: false,
                emailSendModelVisible: false
            }
        },
        created() {
            this.queryVerifyMethod();
        },
        methods: {
            queryVerifyMethod() {
                verifyApi.queryVerifyMethod().then(resp => {
                    if (resp.data.flag) {
                        this.verifyMethod = resp.data.data
                        console.log(this.verifyMethod)
                    }
                })
            },
            openSendMobileCode() {
                this.mobileSendModelVisible = true;
            },
            openSendEmailCode() {
                this.emailSendModelVisible = true;
            },
            closeMobileForm() {
                this.mobileSendModelVisible = false
            },
            closeEmailForm() {
                this.emailSendModelVisible = false
            }
        }
    }
</script>

<style scoped>
    .verify-btn {
        width: 400px;
        height: 50px;
        font-size: 20px;
        background: white;
        color: black;
        border: 1px solid #ccc;
        cursor: pointer;
        padding: 0px 20px;
    }

    .verify-btn :hover {
        border: 1px solid black;
    }
</style>